<template>
  <div class="modify-wrap">
    <el-dialog :visible.sync="dialogVisibleModify.show" center>
      <div class="show-name">应用名称：{{ app_name }}</div>
      <div class="form-con">
        <!-- 选择分组 -->
        <el-form
          :inline="true"
          :model="form3_ruleform"
          ref="form3"
          :rules="form3_rules"
          class="demo-form-inline form3"
        >
          <el-form-item label="选择分组" prop="selOrg">
            <el-checkbox-group v-model="form3_ruleform.selOrg">
              <el-checkbox
                :label="item.org_id"
                :key="item.org_id"
                :org_id="item.org_id"
                v-for="item in orgLabel"
                >{{
                  item.gfather_name +
                  " - " +
                  item.father_name +
                  " - " +
                  item.org_name
                }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="onSubmit3('form3')"
              >保存</el-button
            >
            <el-button type="warning" plain @click="onReset('form3')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 选择业务范围 -->
        <el-form
          :inline="true"
          :model="form4_ruleform"
          ref="form4"
          :rules="form4_rules"
          class="demo-form-inline form4"
        >
          <el-form-item label="选择业务范围--设备" prop="businessRange">
            <el-radio-group v-model="form4_ruleform.businessRange">
              <el-radio label="-1">全部禁止</el-radio>
              <el-radio label="0">全部允许</el-radio>
              <el-radio label="1">指定范围</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="onSubmit4('form4')"
              >保存</el-button
            >
            <el-button type="warning" plain @click="onReset('form4')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 用户登录 -->
        <el-form
          :inline="true"
          :model="form5_ruleform"
          ref="form5"
          :rules="form5_rules"
          class="demo-form-inline form5"
        >
          <el-form-item label="用户登录" prop="need_token">
            <el-radio-group v-model="form5_ruleform.need_token">
              <el-radio label="0">无需登录</el-radio>
              <el-radio label="1">需要登录</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="onSubmit5('form5')"
              >保存</el-button
            >
            <el-button type="warning" plain @click="onReset5('form5')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {
    app_id: {
      type: String,
      default: "",
    },
    app_name: {
      type: String,
      default: "",
    },
    need_token: {
      type: Number,
      default: 0,
    },
    dialogVisibleModify: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
  },
  data() {
    return {
      app_id_sel: "", //打开弹窗，当前行app_id
      app_name_seled: "", //  父组件的name
      roleLabel: [], //添加中，角色的label
      orgLabel: [], //添加中，组织机构的label
      // form3: {
      form3_ruleform: {
        selOrg: [],
      },
      form3_rules: {
        selOrg: [
          {
            type: "array",
            required: false,
            message: "请至少选择一个分组",
            trigger: "change",
          },
        ],
      },
      // form4
      form4_ruleform: {
        businessRange: "",
      },
      form4_rules: {
        businessRange: [
          { required: false, message: "请选择业务范围", trigger: "blur" },
        ],
      },
      // form5
      form5_ruleform: {
        need_token: 0,
      },
      form5_rules: {
        need_token: [
          { required: false, message: "请选择用户登录", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    app_id: {
      handler(newVal) {
        this.app_id_sel = newVal;
        this.getOrgLabel();
        this.getBusinessRangeLabel();
        this.get_need_token();
      },
      immediate: true,
    },
    app_name: {
      handler(newVal) {
        this.app_name_seled = newVal;
      },
      immediate: true,
    },
  },
  computed: {},
  created() {},
  mounted() {
  },
  methods: {
    //添加提交333
    onSubmit3(formName) {
      var that = this;
      that.$refs[formName].validate((valid) => {
        console.log(that.roleLabel);
        if (valid) {
          postData("/adminweb/dev/app/org/set", {
            app_id: that.app_id,
            orgs: that.form3_ruleform.selOrg,
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("修改成功！");
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("修改失败");
          return false;
        }
      });
    },
    //添加提交4444
    onSubmit4(formName) {
      var that = this;
      that.$refs[formName].validate((valid) => {
        console.log(that.roleLabel);
        if (valid) {
          postData("/adminweb/dev/app/bizfor/set", {
            app_id: that.app_id,
            bizfors: [
              {
                biz_type: 0,
                biz_for: that.form4_ruleform.businessRange,
              },
            ],
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("成功！");
              } else {
                that.$message.error(res);
              }
            })
            .catch((res) => {
              that.$message.error(res);
            });
        } else {
          that.$message.error("error");
          return false;
        }
      });
    },
    //添加提交5，用户登录
    onSubmit5(formName) {
      var that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          postData("/adminweb/dev/app/update/needtoken", {
            app_id: that.app_id,
            need_token: Number(that.form5_ruleform.need_token),
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("成功！");
                 that.$emit("refreshList");
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("设置失败");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      this.$refs[val].resetFields();
    },
    onReset5(val) {
      this.form5_ruleform.need_token = -1;
    },
    //3获取管理员的组织机构的label
    getOrgLabel() {
      postData("/adminweb/org/list", {
        org_for: "app",
        org_for_id: this.app_id,
      })
        .then((res) => {
          console.log(res);
          var arr = [];
          if (res.code == 0) {
            let orgs = res.datas.orgs;
            this.orgLabel = orgs;
            //初始的时候，根据authorized，勾选上
            for (var i = 0; i < orgs.length; i++) {
              if (orgs[i].authorized == 1) {
                arr.push(orgs[i].org_id);
              }
            }
            this.$set(this.form3_ruleform, "selOrg", arr);
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //4、业务范围初始的时候,默认打点
    getBusinessRangeLabel() {
      postData("/adminweb/dev/app/bizfor/list", {
        app_id: this.app_id,
      })
        .then((res) => {
          // var arr = [];
          if (res.code == 0) {
            let bizfors = res.datas.bizfors;
            console.log(bizfors);
            for (var i = 0; i < bizfors.length; i++) {
              if (bizfors[i].biz_type == 0) {
                this.form4_ruleform.businessRange = JSON.stringify(
                  bizfors[i].biz_for
                );
                //console.log(bizfors[i].biz_for);
              }
            }
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    get_need_token(){
        this.form5_ruleform.need_token = JSON.stringify(this.need_token);
    }
  },
};
</script>
<style scoped>
/* 更改table,表头背景 */
.modify-wrap >>> .el-table--border th,
.el-table__fixed-right-patch {
  /* background: #c0dee2; */
  background: #f0f3f4;
}
.modify-wrap {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.show-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  background: #c0dee2;
  padding-left: 30px;
  font-size: 14px;
  margin: 6px 0 20px 0;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
}

.show-title::before {
  content: "";
  width: 2px;
  height: 16px;
  background: #676a6d;
  position: absolute;
  top: 12px;
  left: 15px;
}

.show-title span {
  float: left;
  color: #676a6d;
  margin-left: 25px;
}
.form1 {
  margin-left: 15px;
}
.show-name {
  margin-bottom: 20px;
  font-weight: bold;
}

.modify-wrap >>> .el-dialog__header {
  padding: 20px 0 !important;
}

.modify-wrap >>> .el-form-item:last-child {
  /* margin-left: 10% !important; */
}

.modify-wrap >>> .demo-form-inline {
  width: 32%;
  height: 454px;
  min-height: 454px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 10px;
  background: #fafafa;
  border-radius: 5px;
  padding: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.modify-wrap >>> .el-dialog {
  width: 60%;
  height: 600px;
}
.form-con {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.modify-wrap >>> .el-dialog__header {
  padding: 40px 0;
}
.modify-wrap >>> .el-dialog__body {
  padding: 0 30px 30px 30px;
  /* display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: column; */
}

.modify-wrap .form2 >>> .el-form-item {
  width: 100% !important;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.modify-wrap .form3 >>> .el-form-item {
  width: 100% !important;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.modify-wrap .form4 >>> .el-form-item {
  width: 100% !important;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.modify-wrap .form5 >>> .el-form-item {
  width: 100% !important;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.modify-wrap .form2 >>> .el-form-item__label {
  display: block;
  float: left !important;
}
.wramodify-wrapp .form3 >>> .el-form-item__label {
  display: block;
  float: left !important;
}
.modify-wrap .form4 >>> .el-form-item__label {
  display: block;
  float: left !important;
}
.modify-wrap .form5 >>> .el-form-item__label {
  display: block;
  float: left !important;
}
.modify-wrap .form3 >>> .el-checkbox {
  display: block !important;
}
.modify-wrap .form5 >>> .el-checkbox {
  display: block !important;
}
.modify-wrap .form4 >>> .el-radio {
  display: block !important;
  margin: 20px 0 !important;
}
.modify-wrap .form5 >>> .el-radio {
  display: block !important;
  margin: 20px 0 !important;
}
</style>
